<template>
  <div class="app-container jsbos-flex-main systemConfig">
    <el-tabs
      v-model="activeName"
      type="border-card"
      class="jsbos-el_tabs"
      @tab-click="handleClick"
    >
      <el-tab-pane label="学员监控" name="first">
        <div class="jsbos-common-layout-center">
          <el-row class="jsbos-common-search-box" :gutter="18">
            <el-form @submit.native.prevent>
              <el-col :span="6">
                <el-form-item label="姓名">
                  <el-input
                    v-model="listQuery.reallyName"
                    placeholder="请输入"
                    clearable
                  />
                </el-form-item>
                <!-- <el-form-item label="学员">
                  <user-select v-model="listQuery.creatorUserId" placeholder="请选择" clearable />
                </el-form-item>-->
              </el-col>
              <el-col :span="6">
                <el-form-item>
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    @click="search()"
                    >查询</el-button
                  >
                  <el-button icon="el-icon-refresh-right" @click="reset()"
                    >重置</el-button
                  >
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
          <jsbos-table
            v-loading="listLoading"
            :data="firstData"
            :border="true"
            :hasNO="false"
            style="margin-left: 5px"
          >
            <el-table-column
              prop="reallyName"
              label="姓名"
              width="120"
              :align="'left'"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              prop="account"
              label="账号"
              width="120"
              :align="'center'"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              prop="wrongQuestionNum"
              label="错题总数"
              :align="'center'"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              prop="wrongQuestionTimes"
              label="错题总次数"
              :align="'center'"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              prop="everydayTimes"
              label="每日练习次数"
              :align="'center'"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              prop="interestTimes"
              label="兴趣练习次数"
              :align="'center'"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              prop="simulateTimes"
              label="模拟练习次数"
              :align="'center'"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              prop="autonomicTimes"
              label="自主练习次数"
              :align="'center'"
              :show-overflow-tooltip="true"
            />
          </jsbos-table>
        </div>
      </el-tab-pane>
      <!-- <el-tab-pane label="错题分析" name="second"></el-tab-pane> -->
      <el-tab-pane label="数据分析" name="third">
        <div class="jsbos-common-layout-center">
          <el-row class="jsbos-common-search-box" :gutter="18">
            <el-form @submit.native.prevent>
              <el-col :span="6">
                <el-form-item label="题目">
                  <el-input
                    v-model="listQuery.title"
                    placeholder="请输入"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item>
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    @click="search()"
                    >查询</el-button
                  >
                  <el-button icon="el-icon-refresh-right" @click="reset()"
                    >重置</el-button
                  >
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
          <jsbos-table
            v-loading="listLoading"
            :data="thirdData"
            :border="true"
            :hasNO="false"
            style="margin-left: 5px"
          >
            <el-table-column
              prop="title"
              label="题目"
              width="500"
              :align="'left'"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              prop="wrongTimes"
              label="错题人数"
              :align="'center'"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              prop="wrongUserTimes"
              label="错题次数"
              :align="'center'"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              prop="averageTimes"
              label="每人平均错题次数"
              :align="'center'"
              :show-overflow-tooltip="true"
            />
          </jsbos-table>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {
  selectUserMonitor,
  selectWrongQuestionAnalysis,
} from "@/views/exam/api/temsExamStudy";
export default {
  name: "practice-count",
  components: {},
  data() {
    return {
      listQuery: {
        title: undefined,
        reallyName: undefined,
        creatorUserId: undefined,
      },
      listLoading: false,
      activeName: "first",
      firstData: [],
      secondData: [],
      thirdData: [],
    };
  },
  watch: {},
  created() {
    this.initData();
  },
  methods: {
    initData() {
      if (this.activeName == "first") {
        let _query = {
          ...this.listQuery,
          menuId: this.menuId,
        };
        this.listLoading = true;
        // 学院监控
        selectUserMonitor(_query).then((res) => {
          this.listLoading = false;
          this.firstData = res.data;
          console.log("---firstData", this.firstData);
        });
      }
      if (this.activeName == "third") {
        let _query = {
          ...this.listQuery,
          menuId: this.menuId,
        };
        this.listLoading = true;
        // 学院监控
        selectWrongQuestionAnalysis(_query).then((res) => {
          this.listLoading = false;
          this.thirdData = res.data;
          console.log("---thirdData", this.thirdData);
        });
      }
    },
    handleClick(tab, event) {
      this.initData();
    },
    search() {
      this.initData();
    },
    reset() {
      this.resetListQuery();
      this.initData();
    },
    resetListQuery() {
      this.listQuery = {
        title: undefined,
        reallyName: undefined,
        creatorUserId: undefined,
      };
    },
  },
};
</script>
<style lang="scss" scoped></style>
